<template>
  <div class="order">
    <!-- 如果路径上携带有订单id显示当前订单详情 -->
    <OrderDetail v-if="orderId" />
    <!-- 路径上没有订单id则显示全部订单信息 -->
    <AllOrder v-else />
  </div>
</template>

<script setup lang="ts" name="Order">
import AllOrder from '@/pages/user/order/AllOrder.vue'
import OrderDetail from '@/pages/user/order/OrderDetail.vue'
import { ref, watchEffect } from 'vue'
import { useRoute } from 'vue-router'

// 获取路由对象
const route = useRoute()
// 存储当前订单的id
let orderId = ref(route.query.orderId)
// 监视路由对象当其改变时重新获取query参数
watchEffect(() => {
  orderId.value = route.query.orderId
})
</script>

<style scoped lang="scss"></style>
